<template>
  <div id="line" :style="size">
    <div class="dragRectTop"></div>
    <Echarts :size="size" :options="options" />
    <div class="dragRectBottom"></div>
  </div>

</template>

<script>
import Echarts from '@/components/Echarts'
export default {
  data () {
    return {
      options: {
        title: {
          text: '新冠疫情新增情况',
          left: 'center',
          textStyle: {
            color: '#fff'
          }
        },
        color: ['#00f2f1', '#ed3f35'],
        tooltip: {
          trigger: 'axis', //触发类型；轴触发，axis则鼠标hover到一条柱状图显示全部数据，item则鼠标hover到折线点显示相应数据
          axisPointer: {
            lineStyle: {
              color: '#dddc6b'
            }
          }
        },
        legend: {
          top: '10%',
          // right: '10%',
          textStyle: {
            color: 'rgba(255,255,255,0.6)',
            fontSize: 12
          },
          // data: ['广州', '深圳']
        },
        grid: {
          top: '20%',
          left: '10%',
          right: '10%',
          bottom: '10%',
          show: true,
          // borderColor: '#012f4a',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20','21', '22', '23', '24', '25', '26', '27', '28', '29', '30'],
          axisTick: {
            // 去掉刻度线
            show: false
          },
          axisLabel: {
            textStyle: {
              color: 'rgba(255,255,255,0.7)',
              fontSize: 12
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,0.5)'
            }
          }
        },
        yAxis: {
          type: 'value',
          axisTick: {
            show: false
          },
          axisLabel: {
            color: 'rgba(255,255,255,0.7)',
            fontSize: 12
          },
          splitLine: {
            lineStyle: {
              color: '#012f4a'
            }
          }
        },
        series: [
          {
            name: '新冠确诊',
            type: 'line',
            symbol: 'none',  //取消折点圆圈
            smooth: true, // 线条圆滑
            data: [120, 132, 101, 134, 90, 230, 210, 550, 120, 333, 1520, 111, 250, 130, 152, 120, 132, 101, 134, 90, 230, 210, 550, 120, 333, 1520, 111, 250, 130, 152],
            lineStyle: {
              normal: {
                color: '#0184d5',
                lineWidth: 2
              }
            },
            // 显示区域
            areaStyle: {
              normal: {
                color: '#rbga(255,255,255,0.2)'
              }
            }
          },
          {
            name: '新冠疑似',
            type: 'line',
            symbol: 'none',  //取消折点圆圈
            smooth: true, // 线条圆滑
            data: [220, 182, 191, 234, 290, 330, 310, 230, 210, 550, 120, 333, 120, 132, 101, 134, 90, 230, 210, 550, 120, 333, 1520, 111, 250, 130, 152, 55, 11,999],
            lineStyle: {
              normal: {
                color: 'green',
                lineWidth: 2
              }
            },
            // 显示区域
            areaStyle: {
              normal: {
                color: '#rbga(255,255,255,0.2)'
              }
            }
          }
        ]
      },
      size: {
        width: "100%",
        height: "3.875rem"
      },
      year: 2000
    }
  },
  components: {
    Echarts
  },
  mounted () {
    
  }
}
</script>

<style scoped>
	#line{
		background-image: url(../assets/line.png);
		position: relative;
		border: 1px solid rgba(255, 255, 255, 0.1);
	}
	.dragRectTop{
		width: 100%;
		height: 10px;
		position: absolute;
		top: 0;
		left: 0;
	}
	.dragRectTop::before{
		width: 10px;
		height: 10px;
		border-left: 2px solid #02a6b5;
		border-top: 2px solid #02a6b5;
		content: "";
		display: block;
		position: absolute;
		left: 0;
		top: 0;

	}
	.dragRectTop::after{
		width: 10px;
		height: 10px;
		border-right: 2px solid #02a6b5;
		border-top: 2px solid #02a6b5;
		content: "";
		display: block;
		position: absolute;
		right: 0;
		top: 0;

	}
	.dragRectBottom{
		width: 100%;
		height: 10px;
		position: absolute;
		bottom: 0;
		left: 0;
	}
	.dragRectBottom::before{
		width: 10px;
		height: 10px;
		border-left: 2px solid #02a6b5;
		border-bottom: 2px solid #02a6b5;
		content: "";
		display: block;
		position: absolute;
		left: 0;
		bottom: 0;

	}
	.dragRectBottom::after{
		width: 10px;
		height: 10px;
		border-right: 2px solid #02a6b5;
		border-bottom: 2px solid #02a6b5;
		content: "";
		display: block;
		position: absolute;
		right: 0;
		bottom: 0;

	}
</style>